<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>信息</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        var jqxhr;
        //设置ajax请求完成后运行的函数,
        $.ajaxSetup({
            complete: function () {
                if ("REDIRECT" == jqxhr.getResponseHeader("REDIRECT")) { //若HEADER中含有REDIRECT说明后端想重定向，
                    var win = window;
                    while (win != win.top) {
                        win = win.top;
                    }
                    win.location.href = jqxhr.getResponseHeader("CONTENTPATH");//将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
                }
            }
        });
        jqxhr = $.ajax({
                url: "/resume/all",//url
                type: 'POST',
                data: $('#formAdd').serialize(),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    if (result == null) {
                        return
                    }
                    $("#test").html("");
                    //将数据显示在页面上
                    var str = "";
                    //遍历数据
                    $.each(result, function (index, element) {
                        var trid = element['id']
                        str +=
                            "<tr id=" + trid + ">" +
                            "<td><input type='text' name='id' style='width:60px;' readonly='readonly' value='" + element['id'] + "'></td>" +
                            "<td><input type='text' name='name' style='width:60px;' value='" + element['name'] + "'></td>" +
                            "<td><input type='text' name='address' style='width:60px;' value='" + element['address'] + "'></td>" +
                            "<td><input type='text' name='phone' style='width:100px;' value='" + element['phone'] + "'></td>" +
                            "<td><input type='button' id='updateBtn' value='编辑'/></td>" +
                            "<td><input type='button' id='deleteBtn' value='删除'/></td>" +
                            "</tr>";
                    })
                    //将表格添加到body中
                    $('#resume').append(str);
                }
            }
        )

        $(function () {
            $("#ajaxBtn").bind("click", function () {
                var formObject = {};
                var formArray = $("#formAdd").serializeArray();
                $.each(formArray, function (i, item) {
                    formObject[item.name] = item.value;
                });
                // 发送ajax请求
                jqxhr = $.ajax({
                    url: "/resume/add",//url
                    type: 'POST',
                    data: JSON.stringify(formObject),
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (result) {
                        if (result == null) {
                            return;
                        }
                        //将数据显示在页面上
                        var str = "";
                        var trid = result['id']
                        str +=
                            "<tr id=" + trid + ">" +
                            "<td><input type='text' name='id' style='width:60px;' readonly='readonly' value='" + result['id'] + "'></td>" +
                            "<td><input type='text' name='name' style='width:60px;' value='" + result['name'] + "'></td>" +
                            "<td><input type='text' name='address' style='width:60px;' value='" + result['address'] + "'></td>" +
                            "<td><input type='text' name='phone' style='width:100px;' value='" + result['phone'] + "'></td>" +
                            "<td><input type='button' id='updateBtn' value='编辑'/></td>" +
                            "<td><input type='button' id='deleteBtn' value='删除'/></td>" +
                            "</tr>";
                        //将表格添加到body中
                        $('#resume').append(str);
                    }
                })

            })
        })
        $(document).on('click', '#deleteBtn', function () {
            var id = $(this).parent().parent().find('input[name^="id"]').val()//得到id
            var url = "/resume/delete/" + id
            jqxhr = $.ajax({
                url: url,//url
                type: 'POST',
                data: null,
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    var selector = "tr[id^=" + result['id'] + "]";
                    $(selector).remove();
                }
            })
        })
        $(document).on('click', '#logoutBtn', function () {
            var url = "/resume/logout"
            jqxhr = $.ajax({
                url: url,//url
                type: 'POST',
                data: null,
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (result) {

                }
            })
        })
        $(document).on('click', '#updateBtn', function () {
            var id = $(this).parent().parent().find('input[name^="id"]').val()//得到id
            var name = $(this).parent().parent().find('input[name^="name"]').val()//得到name
            var address = $(this).parent().parent().find('input[name^="address"]').val()//得到address
            var phone = $(this).parent().parent().find('input[name^="phone"]').val()//得到phone
            var obj = {};
            obj["id"] = id;
            obj["name"] = name;
            obj["address"] = address;
            obj["phone"] = phone;
            jqxhr = $.ajax({
                url: "/resume/update",
                type: 'POST',
                data: JSON.stringify(obj),
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (result) {
                    var selector = "tr[id^=" + result['id'] + "]";
                    $(selector).remove();
                    var str = "";
                    var trid = result['id']
                    str +=
                        "<tr id=" + trid + ">" +
                        "<td><input type='text' name='id' style='width:60px;' readonly='readonly' value='" + result['id'] + "'></td>" +
                        "<td><input type='text' name='name' style='width:60px;' value='" + result['name'] + "'></td>" +
                        "<td><input type='text' name='address' style='width:60px;' value='" + result['address'] + "'></td>" +
                        "<td><input type='text' name='phone' style='width:100px;' value='" + result['phone'] + "'></td>" +
                        "<td><input type='button' id='updateBtn' value='编辑'/></td>" +
                        "<td><input type='button' id='deleteBtn' value='删除'/></td>" +
                        "</tr>";
                    //将表格添加到body中
                    $('#resume').append(str);
                }
            })
        })
    </script>
</head>
<body>
<div align="center">
    <form id="formAdd" onsubmit="return false" action="##" method="post">
        地址：<input type="text" name="address" style="width:60px;">
        姓名：<input type="text" name="name" style="width:60px;">
        电话：<input type="text" name="phone" style="width:100px;">
        <input type="button" id="ajaxBtn" value="新增"/>
    </form>
    <input type="button" id="logoutBtn" value="退出登陆"/>
    <table border="1" cellspacing="0">
        <thead>
        <th style="width:60px;">id</th>
        <th style="width:60px;">姓名</th>
        <th style="width:60px;">住址</th>
        <th style="width:100px;">电话</th>
        </thead>
        <tbody id="resume"></tbody>
    </table>
</div>
</body>
</html>
